<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form>
          <div class="filter-container">
            <el-form-item>
              <p>说明：目前支持学科和关键字条件筛选</p>
              <el-row>
                <el-button
                @click="$router.push('new')"
                  type="success"
                  icon="el-icon-edit"
                  style="position: absolute; right: 5px; bottom: 20px"
                  >新增试题</el-button
                >
              </el-row>
              <span>学科</span>
              <el-select v-model="subjectId.value" placeholder="请选择">
                <el-option
                v-for="item in subjectID"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
                </el-select>
              <span>二级目录</span>
          <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in catalogID"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

              <span>标签</span>
           <el-select v-model="tags.label" placeholder="请选择">
                <el-option
                v-for="item in tags"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>

              <span>关键字</span>
              <el-input
                style="width: 200px"
                placeholder="请选择"
                v-model="keyword"
              >
              </el-input>

              <div class="box">
                <span>试题类型</span>
               <el-select v-model="questionType.label" placeholder="请选择">
                <el-option
                v-for="item in questionType"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <span>难度</span>
               <el-select v-model="difficulty.label" placeholder="请选择">
                <el-option
                v-for="item in difficulty"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <span>方向</span>
               <el-select v-model="direction.label" placeholder="请选择">
                <el-option
                v-for="item in direction"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <span>录入人</span>
              <el-select v-model="creatorID.username" placeholder="请选择">
                <el-option
                v-for="item in creatorID"
                :key="item.value"
                :label="item.username"
                :value="item.id">
                </el-option>
            </el-select>
              </div>
              <div class="box">
                <span>题目备注</span>
                <el-input
                  style="width: 200px"
                  v-model="remarks"
                >
                </el-input>
                <span>企业简称</span>
                <el-input
                  style="width: 200px"
                  v-model="shortName"
                >
                </el-input>
                <span class="aa">
                  <el-button size="small" type="primary" @click="cleanUp">清除</el-button>
                  <el-button size="small" type="primary"  @click="handleFilter" 
                  >搜索</el-button>
                </span>
              </div>
            </el-form-item>
          </div>
        </el-form>
        
      </el-card> 
    </div>
  </div>
</template>
<script>
import {simple} from "@/api/hmmm/subjects.js";
import {list,choice} from '@/api/hmmm/questions.js'
import {simpleUsers} from '@/api/base/users.js'
export default {
  data() {
    return {
      subjectId:{
        value:'',
        label:''
      }, //学科
      difficulty: [{
        value:'1',
        label:'简单'
      },
      {
        value:'2',
        label:'一般'
      },
      {
        value:'3',
        label:'困难'
      }], //难度
      questionType: [{
        value:'1',
        label:'单选'
      },
      {
        value:'2',
        label:'多选'
      },
      {
        value:'3',
        label:'简答'
      }], //试题类型
      tags: [{
        value:'',
        label:''
      }], //标签名称
      keyword: "", //关键字
      remarks: "", //题目备注
      shortName: "", //企业简称
      direction: [{
        value:'1',
        label:'o2o'
      },
      {
        value:'2',
        label:'外包服务'
      },
      {
        value:'3',
        label:'企业服务'
      },
      {
        value:'4',
        label:'互联网金融'
      },
      {
        value:'5',
        label:'企业咨询'
      },
      {
        value:'6',
        label:'互联网'
      },
      {
        value:'7',
        label:'电子商务'
      },
      {
        value:'8',
        label:'其他'
      }], //方向
      creatorID: [{
        value:'',
        label:''
      }], //录入人
      catalogID: [{
        id:'',
        username:''
      }], //目录
        value:'',
    requestParameters:{
        page:1,
        pagesize:10,
    }, 
    subjectID:'',
   
    }
  } ,
  created() {
    this.simple();
    this.simpleUsers()
  },
  methods: {
    //学科目录
    async simple() {
      const {data}= await simple();
      console.log(data);
        this.subjectID = data
    },
    //录入人目录
    async simpleUsers(){
        const {data} = await simpleUsers()
        this.creatorID = data
    },
    //清除
  async  cleanUp(){
        this.subjectId.value = ''
        this.difficulty.label =''
        this.questionType.label = ''
        this.tags.label = ''
        this.keyword = "" 
        this.remarks =  "" 
        this.shortName = ""
        this.direction.label = ''
        this.creatorID.username = ''
        this.catalogID.label = ''
        this.$emit('list',list)//重新渲染基础题库
    },
    //搜索
   handleFilter(){
            //  console.log(this.subjectId.value)
            //  this.subjectID =  this.subjectId.label 
               this.$emit('newList',this.subjectId.value)
        //    console.log(res);
           this.subjectId.label =''

        
    },
    // async list(){
    //     const res = await list(this.requestParameters)  //this.$route.data.item
    //     console.log(res);
    //  const { counts, items } = res.data
     
            

    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  // text-align: right;
}
p {
  font-size: 10px;
  color: pink;
}
span {
  margin-left: 30px;
    margin-right: 10px;
        font-size: 700;
}
.box {
  margin-top: 20px;

}
.aa {
  width: 100px;
  height: 50px;
  margin-left: 400px;
  border: none;
}
</style>

<style >
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
/* .el-form-item {
  margin-bottom: 0;
} */
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
